<template>
  <div class="footer">
    <router-link to="/home">
      <van-icon class="icon" name="wap-home" />
      <span>首页</span>
    </router-link>
    <router-link to="/kind">
      <van-icon class="icon" name="label" />
      <span>分类</span>
    </router-link>
    <router-link to="/ceo">
      <van-icon class="icon" name="gem" />
      <span>CEO</span>
    </router-link>
    <router-link to="/cart">
      <van-icon class="icon" name="shopping-cart" />
      <span>购物车</span>
    </router-link>
    <router-link to="/me">
      <van-icon class="icon" name="manager" />
      <span>我的</span>
    </router-link>

  </div>
</template>

<script>
export default {
  name: "Footer",
};
</script>

<style scoped>
a {
  text-decoration: none;
  color: rgb(102, 102, 102);
  margin-top: .08rem;
  font-size: .32rem;
}

/* a.router-link-exact-active 激活状态链接的样式 */
a.router-link-exact-active {
  color: #f03d37;
  font-weight: bold;
}

.icon {
  font-size: .64rem;
}
span {
  display: block;
}
.footer {
  width: 100%;
  height: 1.333333rem;
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
}
</style>
